<template>
  <div class="construction-qualification">
    <van-header title="建筑资质"/>
    <img src="~assets/zz.png"/>
    <section class="service">
      <van-title :border="false" title="服务项目"/>
      <van-grid icon-size="45px" :column-num="3">
        <van-grid-item v-for="item in list" :key="item.text" :icon="item.icon" :text="item.text"/>
      </van-grid>
    </section>
    <section class="process">
      <van-title :border="false" title="办理流程"/>
      <van-grid icon-size="35px" :column-num="2">
        <van-grid-item v-for="item in data" :key="item.text" :icon="item.icon">
          <template #text>
            <div>
              <h1>{{item.title}}</h1>
              <p>{{item.text}}</p>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </section>
    <section class="case">
      <van-title :border="false" title="案例展示"/>
      <div class="box">
        <van-swipe class="my-swipe" :loop="false" :width="287">
          <van-swipe-item>
            <img src="~/assets/swipe/1.png"/>
            <img src="~/assets/swipe/2.png"/>
          </van-swipe-item>
          <van-swipe-item>
            <img src="~/assets/swipe/3.png"/>
            <img src="~/assets/swipe/4.png"/>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">
            </div>
          </template>
        </van-swipe>
      </div>
    </section>
    <van-footer/>
  </div>
</template>

<script>
  import VanFooter from "../components/van-footer";

  export default {
    name: "constructionQualification",
    components: {VanFooter},
    data() {
      return {
        list: [
          {
            icon: require('~/assets/icon/service1.png'),
            text: '建筑工程总承包'
          },
          {
            icon: require('~/assets/icon/service2.png'),
            text: '公路工程总承包 '
          },
          {
            icon: require('~/assets/icon/service3.png'),
            text: '水利水电工程 总承包'

          },
          {
            icon: require('~/assets/icon/service4.png'),
            text: '铁路工程总承包'
          },
          {
            icon: require('~/assets/icon/service5.png'),
            text: '市政公用工程 总承包'
          },
          {
            icon: require('~/assets/icon/service6.png'),
            text: '石油化工工程 总承包'
          },
          {
            icon: require('~/assets/icon/service7.png'),
            text: '矿山工程总承包 '
          },
          {
            icon: require('~/assets/icon/service8.png'),
            text: '电力工程总承包'
          },
          {
            icon: require('~/assets/icon/service9.png'),
            text: '通信工程总承包 '
          }
        ],
        data: [
          {
            text: '咨询客服您所需求的问题',
            title: '1.客户咨询',
            icon: require('~/assets/icon/7.png'),
          },
          {
            text: '提交相关材料，我们帮您全权办理',
            title: '4.提交办理',
            icon: require('~/assets/icon/10.png'),
          },
          {
            text: '签订资质办理委托协议，保证您的权益',
            title: '2.签订协议',
            icon: require('~/assets/icon/8.png'),
          },
          {
            text: '审核通过后，网上公示资质信息',
            title: '5.网上公告',
            icon: require('~/assets/icon/11.png'),
          },
          {
            text: '申报办理资质所需要的各种表格及材料',
            title: '3.申报资料',
            icon: require('~/assets/icon/9.png'),
          },
          {
            text: '与您交接资质证书',
            title: '6.成功拿证',
            icon: require('~/assets/icon/12.png'),
          }
        ]
      }
    }
  }
</script>

<style scoped lang="less">
  .construction-qualification {
    > img {
      width: 100%;
      display: block;
    }

    .service {
      padding: 0 10px 30px;
      border-bottom: 3px solid #EEEEEE;

      /deep/ .van-grid {
        margin-top: 30px;

        .van-grid-item__content:nth-child(1) {
          &::after {
            border-width: 0 0 1px 1px
          }
        }

        .van-grid-item__content {
          justify-content: flex-start;
        }

        .van-grid-item__text {
          font-size: 11px;
          font-weight: bold;
          color: #1B1B1B;
          text-align: center;
        }
      }

      /deep/ [class*=van-hairline]::after {
        border-color: #6B6B6B;
      }

    }

    .process {
      padding: 0 10px 30px;
      border-bottom: 3px solid #EEEEEE;

      /deep/ .van-grid {
        margin-top: 30px;

        .van-grid-item__content:nth-child(1) {
          &::after {
            border-width: 0 0 1px 1px
          }
        }

        .van-grid-item__content {
          flex-direction: row;

          .van-grid-item__icon {
            margin-right: 22px;
          }

          h1 {
            font-size: 12px;
            color: #343434;
            margin-bottom: 7px;
          }

          p {
            font-size: 10px;
            font-weight: 500;
            color: #5F5F5F;
          }
        }
      }

      /deep/ [class*=van-hairline]::after {
        border-color: #1B1B1B;
      }
    }

    .case {
      border-bottom: 3px solid #EEEEEE;

      .box {
        width: 325px;
        margin: 30px auto 0;
        padding-bottom: 45px;
      }

      img {
        width: 140px;
        height: 200px;
      }
    }
  }
</style>
